import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import styles from './index.css'
import OrderItem from "../../../components/OrderItem"
import Head from "../../../components/Head"
class OrderList extends React.Component {
  state = {
    auth: true,
    anchorEl: null,
    tabList: [
      { name: '全部订单', id: 1 },
      { name: '待审核', id: 2 },
      { name: '已审核', id: 3 },
    ],
    activeIndex:1,
    itemList:[
      {num:'S00000000',status:1,date:'2018-07-03',name:'陈小生',price:'3999'},
      {num:'S00000000',status:2,date:'2018-07-03',name:'陈小生',price:'3999'},
      {num:'S00000000',status:3,date:'2018-07-03',name:'陈小生',price:'3999'},
      {num:'S00000000',status:1,date:'2018-07-03',name:'陈小生',price:'3999'},
      {num:'S00000000',status:2,date:'2018-07-03',name:'陈小生',price:'3999'},
      {num:'S00000000',status:3,date:'2018-07-03',name:'陈小生',price:'3999'},
      {num:'S00000000',status:1,date:'2018-07-03',name:'陈小生',price:'3999'},
      {num:'S00000000',status:2,date:'2018-07-03',name:'陈小生',price:'3999'},
      {num:'S00000000',status:3,date:'2018-07-03',name:'陈小生',price:'3999'},
      {num:'S00000000',status:1,date:'2018-07-03',name:'陈小生',price:'3999'},
    ]
  };

  tabChange = item => {
    this.setState({ activeIndex: item.id });
  };

  handleMenu = (event) => {
    this.setState({ anchorEl: event.currentTarget });
  };

  handleClose = () => {
    this.setState({ anchorEl: null });
  };
  componentDidMount() {
    console.log(3633)
  }

  render() {
    let { tabList ,activeIndex,itemList} = this.state
    return (
      <div style={{"paddingTop":"96px"}}>
         <Head title={"订单列表"} showLift={false} />
        <div className={styles.tab_btn}>
          {tabList.map((item, index) => {
            return (
              <div key={index}  onClick={this.tabChange.bind(this,item)} className={activeIndex===item.id?styles.active_tab:''}>
              {item.name}
              <span className={styles.line}></span>
              </div>
            )
          })}
         </div>
         <div>
          {itemList.map((item,index)=>{
            return (
              <OrderItem key={index} info={item}></OrderItem>
            )
          })}
         </div>
      </div>
    );
  }
}

OrderList.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(OrderList);
